<template>
  <view class="">
    <view class="content" v-for="(item,index) in dataList" :key="index">
      <view class="" v-if="item && item !='null'">
        <view class="content-v1">
          <view class="content-v1-left">
            <u--image shape="circle" :src="item.avatar?item.avatar:imageAvatar" width="84rpx" height="84rpx" class="leftIamge"></u--image>
            <view class="">
              <text>{{item.nickName}}</text>
              <u-rate :value="item.star" disabled active-color="rgba(255, 135, 15, 1)"
                inactiveColor='rgba(214, 214, 214, 1)' class="rateBox"></u-rate>
            </view>
          </view>
          <view class="content-v1-right"><text class="iconfont icon-navbar_more" style="color: #999999;"
              @click="reportComment(item)"  v-if="userInfo.id !=item.petOwnerId"></text></view>
        </view>

        <view class="content-v2 ellipsis2">{{item.content}}</view>
        <!-- 图片 -->
        <BaseUpload :onlyLook='true' v-if="item.imgList" :fileList="item.imgList.split(',')" :height="150" :width="150"></BaseUpload>
        <!-- 回复 -->
        <view class="reply" v-if="item.replyText">
          <view>回复：</view>
          <view class="">{{item.replyText}}</view>
        </view>
        <view class="content-v3">
          <text>{{item.createTime}}</text>
          <text v-if="item.viewCount">{{item.viewCount}}人看过</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import pageMixin from '@/mixins/pageMixin';

export default {
  mixins: [pageMixin],
  components: {},
  data () {
    return {
          imageAvatar:'/static/public/user.png'
    };
  },
  computed: {
    ...mapState('user', ['token', 'userInfo'])
  },
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
  },
  onLoad (options) {
   
  },
  mounted(){
	console.log(57,this.userInfo) //"484390899388911616"  
  },
  methods: {
    reportComment (item) {
      if (!this.token) {
        this.isHasLogin()
        return
      }
      this.$emit('reportComment', item);
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  padding: 20rpx;
  &-v1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    &-left {
      display: flex;
      justify-content: left;
      align-items: center;
      .leftIamge {
        margin-right: 15rpx;
      }
      text {
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #1a1a1a;
        line-height: 28rpx;
      }
      .rateBox {
        margin: 10rpx 0;
        margin-left: -6rpx;
      }
    }
    &-right {
    }
  }
  &-v2 {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 44rpx;
    margin: 15rpx 0;
  }
  &-v3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 24rpx;
    }
  }

  .reply {
    width: 100%;
    border-radius: 12rpx;

    background: #f5f5f5;
    padding: 15rpx;
    display: flex;
    justify-content: left;
    margin-bottom: 15rpx;
    view:nth-child(1) {
      width: 84rpx;
      // background-color: pink;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 44rpx;
    }
    view:nth-child(2) {
      flex: 1;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #1a1a1a;
      line-height: 44rpx;
      word-break: break-all;
    }
  }
}

//  图片、视频 回显组件的样式修改
::v-deep .previewBox {
  position: relative !important;
  // right: -8rpx !important;
  .previewBoxItem {
    margin-left: 15rpx !important;
    margin-right: 0 !important;
    margin-bottom: 15rpx !important;
  }
  .previewBoxItem:nth-child(1) {
    // background-color: pink !important;
    display: none;
  }
  .deleteBox {
    display: none;
  }
}
::v-deep .uicon-star-fill {
  color: rgba(255, 135, 15, 1) !important;
}
</style>
